今天是假日，來練習寫JS吧。

抓取HTML上的位置

const allTime = document.querySelector('.allTime');

為了配合自動更新，用一個方訊包住相關變數

let showTime = () => { //下方的變數不能放外面，setInterval抓不到
    let date = new Date();
    let year = date.getFullYear(); //取得當前年份
    let month = date.getMonth() + 1; //取得月份，從0開始計算，必須+1
    let today = date.getDate(); //取得日期
    let week = date.getDay(); //取得星期幾
    let hour = date.getHours(); //取得小時
    let min = date.getMinutes(); //取得分鐘
    let sec = date.getSeconds(); //取得秒數
}

因應閱讀習慣，星期幾要使用中文顯示，故加上陣列

let arr = ["日", "一", "二", "三", "四", "五", "六"]; 

既然都設定好了就使用吧！

allTime.innerHTML = 
`<p>
目前時間是  ${year}/${month}/${today}  ${hour}:${min}:${sec}
<br>
今天是星期${arr[week]}
</p>`

再加上每秒更新就完成了。

setInterval(showTime, 1000);

但這時候會發現有時候因為時間變動，會有十位數和個位數的區別。
因此我們要在個位數出現時在前方補上0。
以下列出兩種補0的方式：
方法1：

const addZero = data => { 
    return data.toString().padStart(2, 0);
    //padStart(要補全的長度,用來捕全的內容);
}

方法2：

const addZero2 = data => { //另一種補0
    if (data < 10) {
        return `0${data}`
    } else {
        return data;
    }
}

加到原本的時間顯示上就完成了：

allTime.innerHTML = 
`<p>
目前時間是  ${year}/${addZero(month)}/${today} ${addZero(hour)}:${addZero2(min)}:${addZero2(sec)}
 <br>
今天是星期${arr[week]}
</p>`

來看看完整的code吧：

const allTime = document.querySelector('.allTime');

let showTime = () => { //不能放外面，setInterval抓不到
    let date = new Date();
    let year = date.getFullYear(); //取得當前年份
    let month = date.getMonth() + 1; //取得月份，從0開始計算，必須+1
    let today = date.getDate(); //取得日期
    let week = date.getDay(); //取得星期幾
    let hour = date.getHours(); //取得小時
    let min = date.getMinutes(); //取得分鐘
    let sec = date.getSeconds(); //取得秒數
    let arr = ["日", "一", "二", "三", "四", "五", "六"]; //讀取星期幾的陣列

    allTime.innerHTML = `
            <p>目前時間是  ${year}/${addZero(month)}/${today}  ${addZero(hour)}:${addZero2(min)}:${addZero2(sec)}
    <br>
    今天是星期${arr[week]}</p>`
    ;
}

const addZero = data => { //補0
    return data.toString().padStart(2, 0);
    //padStart(要補全的長度,用來捕全的內容);
}

const addZero2 = data => { //另一種補0
    if (data < 10) {
        return `0${data}`
    } else {
        return data;
    }
}

setInterval(showTime, 1000);

連結